<template>
  <div>
    <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form :inline="true" :model="searchFrom" label-width="auto" label-position="left">
        <el-form-item label="订单编号">
          <el-input v-model.trim="searchFrom.param.orderCode" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model.trim="searchFrom.param.customerName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model.trim="searchFrom.param.customerPhone" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="所属站点">
          <el-select v-model="searchFrom.param.websiteId" placeholder="请选择" style="width: 192px" clearable>
            <el-option v-for="dict in host_type" :key="dict.id" :label="dict.name" :value="dict.id"
              :disabled="!dict.status"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单状态">
          <el-select v-model="searchFrom.param.orderStatus" placeholder="请选择" style="width: 192px" clearable>
            <el-option v-for="item in order_status" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="searchFrom.param.payMode" placeholder="请选择" style="width: 190px" clearable>
            <el-option v-for="item in sys_order_pay" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="币种">
          <el-select v-model="searchFrom.param.currencyCode" placeholder="请选择" style="width: 195px" clearable>
            <el-option v-for="item in sys_currency_code" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付金额">
          <el-space spacer="-">
            <el-input type="number" v-model.trim="searchFrom.param.minPayAmount" placeholder="最小支付金额"
              style="width: 192px" clearable />
            <el-input type="number" v-model.trim="searchFrom.param.maxPayAmount" placeholder="最大支付金额"
              style="width: 192px" clearable />
          </el-space>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="searchFrom.param.newTime" type="datetimerange" start-placeholder="开始日期"
            end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>
      </el-form>
    </searchBox>
    <el-table :data="tableData" style="height: calc(100vh - 380px)" v-loading="loading">
      <el-table-column prop="id" label="订单ID" width="100" />
      <el-table-column prop="orderCode" label="订单编号" width="300" />

      <el-table-column prop="customerName" label="收货人" align="center" />
      <el-table-column prop="customerPhone" label="联系电话" align="center" width="200" />
      <el-table-column prop="newCreated" label="下单时间" align="center" width="300" />
      <el-table-column prop="payAmount" label="应付金额">
        <template #default="scope">
          <el-tooltip placement="top">
            <template #content>
              <div>
                {{ scope.row.currencyDescription }}：{{
                  scope.row.payAmount }} {{ scope.row.symbol
                }}
                <br />
                人民币：{{ scope.row.CNYPrice }} ￥
              </div>
            </template>
            <div>
              <el-text>{{ scope.row.payAmount }} {{ scope.row.symbol
              }}</el-text>
              <br />
              <el-text type="info"> {{ scope.row.CNYPrice }}
                ￥</el-text>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>



      <el-table-column prop="paymentMethodCode" label="支付方式" align="center" />
      <el-table-column prop="payStatus" label="支付状态" align="center" />
      <el-table-column prop="newPayTime" label="支付时间" align="center" width="300" />
      <el-table-column prop="shopSiteName" label="所属站点" align="center" />
      <el-table-column prop="newOrderStatus" label="订单状态" align="center" width="200" />
      <el-table-column label="操作" align="center" width="110" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="handleClick(scope.row)">
            详情
          </el-button>
          <el-button link type="primary" @click="treatment(scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum"
      @pagination="handleCurrentChange">
    </Pagination>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { sys_currency_code, order_status, sys_order_pay } = proxy.useDict(
  "order_status",
  "sys_currency_code",
  "sys_order_pay"
);
const host_type = ref([]); //来源网站
const loading = ref(true)

const searchFrom = ref({
  pageNum: 1,
  pageSize: 20,
  param: {
    orderCode: null, //订单编号
    customerName: "", //收货人
    customerPhone: "", //联系方式
    websiteId: null, //站点id
    startTime: "", //开始时间
    endTime: "", //结束时间
    orderStatus: "", //订单状态
    payMode: null, //支付方式
    currencyCode: null, //币种
    maxPayAmount: "", //最大支付金额
    minPayAmount: "", //最小支付金额
    newTime: [], //记得删除
  },
});
const total = ref(0); //数据总数
const tableData = ref([]);
onMounted(() => {
  getLanguage();
  getOrderList();
  // router.push({ path: "/newOrder/newOrder/orderDetails", query: {id:1} });
});
const getOrderList = () => {

  order.order
    .orderList({
      data: searchFrom.value,
    })
    .then((res) => {
      loading.value = false
      if (!res.data?.length) return tableData.value = [];
      res.data = res.data.map((code) => {
        return {
          ...code,
          newPayTime: proxy.DateTime(code.payTime),
          newCreated: proxy.DateTime(code.created),
          newOrderStatus: order_status.value.find(
            (e) => e.value === code.orderStatus
          )?.label,
        };
      });
      tableData.value = res.data;
      total.value = res.total;
    })
};
// 搜索
const handleSearch = () => {
  if (searchFrom.value.newTime) {
    searchFrom.value.startTime = searchFrom.value.newTime[0];
    searchFrom.value.endTime = searchFrom.value.newTime[1];
  }
  getOrderList();
};
// 重置
const handleReset = () => {
  searchFrom.value = {
    pageNum: 1,
    pageSize: 20,
    param: {
      orderCode: null, //订单编号
      customerName: "", //收货人
      customerPhone: "", //联系方式
      websiteId: null, //站点id
      startTime: "", //开始时间
      endTime: "", //结束时间
      orderStatus: "", //订单状态
      payMode: null, //支付方式
      currencyCode: null, //币种
      maxPayAmount: "", //最大支付金额
      minPayAmount: "", //最小支付金额
      newTime: [], //记得删除
    },
  };
  getOrderList();
};
// 分页设置选项
const handleCurrentChange = (val) => {
  searchFrom.value.pageNum = val.page;
  searchFrom.value.pageSize = val.limit;
  getOrderList();
};
const handleClick = (data) => {
  data = {
    ...data,
    operationType: "detail",
  };
  router.push({ path: "/newOrder/newOrder/orderDetails", query: { id: data.id, operationType: data.operationType } });
};
const treatment = (data) => {
  data = {
    ...data,
    operationType: "operator",
  };
  router.push({ path: "/newOrder/newOrder/orderProcessing", query: { id: data.id, operationType: data.operationType } });
};

// 获取字典接口集成
const getLanguage = () => {
  // 所属站点
  site.general
    .sitewebsiteList({
      data: {
        pageNum: 1,
        pageSize: 999,
        param: {},
      },
    })
    .then((res) => {
      host_type.value = res.data;
    });
};

const sys_order_code = ref([
  {
    label: "待付款",
    value: "wait_pay",
  },
  {
    label: "待采购",
    value: "wait_procure",
  },
  {
    label: "待中转",
    value: "wait_shipped",
  },
  {
    label: "待收货",
    value: "wait_receipt",
  },
  {
    label: "交易成功",
    value: "succeed",
  },
  {
    label: "交易关闭",
    value: "closed",
  },
  {
    label: "售后中",
    value: "after_sale",
  },
  {
    label: "退款中",
    value: "refunding",
  },
  {
    label: "已退款",
    value: "refunded",
  },
]); //订单状态
</script>
